<template>
  <div id="mainExpSta">
    <h1
      style="
        font-weight: 700;
        font-style: normal;
        font-size: 24px;
        color: rgb(52, 69, 99);
      "
    >
      维修经费统计
    </h1>
    <div ref="main" style="height: 500px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data: function () {
    return {
      chart:[],
      leData:[],
      monData:[],
      series:[]
    };
  },
  methods: {
    chartFn(){
      var myChart = echarts.init(this.$refs.main);
    myChart.setOption({
      title: {
        text: "",
        subtext: "维修经费（万元）",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        // data: ["维修1线", "维修2线", "维修3线", "维修4线"],
        data: this.leData,
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          // saveAsImage: {},
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
      },
      yAxis: {
        type: "value",
      },
      // series: [
      //   {
      //     name: "维修1线",
      //     type: "line",
      //     data: [12, 13, 11, 14, 9, 23, 21, 13, 28, 35, 24, 40],
      //     smooth: true,
      //   },
      //   {
      //     name: "维修2线",
      //     type: "line",
      //     data: [22, 18, 19, 23, 29, 33, 31, 13, 11, 14, 9, 23],
      //     smooth: true,
      //   },
      //   {
      //     name: "维修3线",
      //     type: "line",
      //     data: [15, 23, 20, 15, 10, 30, 40, 18, 19, 23, 29, 33],
      //     smooth: true,
      //   },
      //   {
      //     name: "维修4线",
      //     type: "line",
      //     data: [32, 33, 30, 33, 39, 33, 32, 15, 23, 20, 15, 10],
      //     smooth: true,
      //   },
      // ],
      series: this.series,
    });
    },
    chartName(){
      this.chart.forEach((v)=>{
        for(let i=0;i<this.leData.length;i++){
          if(this.leData[i]==v.deptName){
            return;
          }
        }
        this.leData.push(v.deptName)
      })
    },
    chartMon(){
      let mon=[];
      this.chart.forEach((v)=>{
        for(let i=0;i<mon.length;i++){
          if(mon[i]==v.month){
            return;
          }
        }
        mon.push(v.month);
      })
      mon.sort(function(n,m){return n-m})
      mon.forEach(v=>{
        this.monData.push(v+'月')
      })
    },
    chartNum(){
      let num=[0,0,0,0,0,0,0,0,0,0,0,0,];
      // this.monData.forEach(v=>{
      //   num.push(0)
      // })
      for(let i=0;i<this.leData.length;i++){
        this.series.push({
          name: this.leData[i],
          type: "line",
          data: [...num],
          smooth: true,
        })
      }
      this.series.forEach(v=>{
        this.chart.forEach(n=>{
          if(v.name==n.deptName){
            v.data[n.month-1]=n.price;
          }
        })
      })
    },
  },
  mounted: function () {
    this.$axios.get("/statistics/maintenanceStatistics").then(({data})=>{
      if(data.code==0){
        this.chart=data.data;
        this.chartName();
        // this.chartMon();
        this.chartNum();
        this.chartFn();
      }else{
        this.$message.error('数据加载失败！')
      }
    })
  },
};
</script>

<style lang="less" scoped>
#mainExpSta {
  padding: 30px;
  h1 {
    padding-bottom: 40px;
  }
}
</style>